<template>
    <div class="finance">
        <section class="order-main-header">
            <mt-header :title="coinIndex+'提币记录'">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        </section>
        <section  class="asset">
               <div class="trade-order">
                      <div class="trade-order--content" id="order-list" growing-ignore="true">
                        <div >
                            <div class="order-table"   v-for="(ticker, i) in coinInList" v-bind:key="i">
                                <div class="order-header">
                                    <div class="flex-between ">
                                        <span  class="order-sell">提币</span>
                                         <div class="vish-order">
                                             <span v-if="ticker.status==1" @click="coinCancelVish(ticker)">撤销</span>
                                            <span @click="coinAddVish(i)">详情</span>
                                         </div>
                                    </div>
                                </div>
                                <div class="order-content flex-between">
                                    <div class="flex-center">
                                        <div class="all-amount flex-column">
                                            <span>数量</span>
                                            <span>{{ticker.amount}}</span>
                                        </div>
                                        <div class="all-amount flex-column">
                                            <span>状态</span>
                                            <span v-if="ticker.status==2">正在处理</span>
                                            <span v-if="ticker.status==1">等待审核</span>
                                             <span v-if="ticker.status==3">提现成功</span>
                                             <span v-if="ticker.status==4">用户撤销</span>
                                             <span v-if="ticker.status==5">审核失败</span>
                                        </div>
                                        <div class="all-amount flex-column">
                                            <span>时间</span>
                                            <span>{{timestampToTime(ticker.time)}}</span>
                                        </div>
                                    </div>
                                </div>
                                    <div  class=" coinAddrees" v-show="i==coinAddreesVish" >
                                        <p ><span class="coin">提币地址</span><span>{{ticker.address}}</span></p>
                                        <p ><span class="coin">区块链交易ID</span><span class="word" :style="{'line-height':(hashLength(ticker.hash)>50?'40px':'')}">{{ticker.hash}}</span></p>
                                        <p style="position: relative;top: 10px;"><span class="coin">提币手续费</span><span>{{ticker.ffees}}</span></p>
                                </div>
                            </div>
                                <div v-if="coinInList.length==0" class="data-img">
                                    <img src="../../assets/noData.png">
                                    <p style=" margin-top: 100px;">暂无提币记录</p>
                                </div>
                        </div>
                 </div>
            </div>
        </section>
    </div>
</template>
<script>
import axios from 'axios'
import { MessageBox } from 'mint-ui';
  import { Toast } from 'mint-ui';//导入toast组件
     import {mapMutations, mapActions} from 'vuex';
export default {
    name:'',
   data(){
         return {
        coinInList:[],
        coinId:'',
        coinAddreesVish:'',
        coinIndex:''
         }
    },
    mounted() {
          this.coinId=this.$route.query.id;
          this.coinIndex=  this.$route.query.index
        this.getcoinInList();
        this.SET_PAYOUT({type:this.coinId})
    },
    methods: {
           ...mapMutations([
                'SET_PAYOUT'
            ]),
        hashLength(res){
            if(res){
                return res.length;
            }
        },
        coinCancelVish(res){
              MessageBox.confirm('确定撤销？').then(action => {
                this.$http.post('v1/account/cancelWithdraw',{id:res.id}).then((res)=>{
                        if(res.data.code==200){
                    Toast("撤销成功");
                    this.getcoinInList();
                        }
                })
        });
            
        },
          coinAddVish(i){
            this.coinAddreesVish=i;
        },
        getcoinInList(){
             this.$http.post('v1/account/coinOut',{symbol: this.coinId,page:1,pageSize:10}).then((res)=>{
                 this.coinInList=res.data.data;
                })
            },
                    timestampToTime (cjsj) {
        var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = (date.getMinutes()< 10 ?'0'+date.getMinutes():date.getMinutes())+ ':'
        var s = date.getSeconds()
        return Y+M+D+h+m+s
        console.log(timestampToTime (1533293827000))
    },
        　　handleClose(){
                this.$router.go(-1);
            },
    }
}
</script>
<style lang="less" scoped>
.mint-header{
    height: 100px;
    font-size: 32px;
    background-color: #161736;
    color: #E0E0F9
}
.vish-order span:nth-child(1){
    margin-right: 20px;
}
.order-table{
    padding: 10px 30px 30px 30px;
    background: #222240;
    position: relative;
    margin: 20px 0px 20px 0px;
}
.order-table .flex-between{
      display: flex;
        justify-content: space-between;
    }
.flex-center{
    display: flex;
   align-self: center;
}
.coinAddrees{
    display: flex;
    flex-direction: column;
    color:rgba(224,224,249,1);
line-height:60px;
height: 140px;
font-size: 24px;
padding-top: 10px;
margin-bottom: 20px;
.word{
    word-wrap:break-word;width:500px;
    vertical-align:middle;
}
p span:last-child(2){
    margin-left: 10px;
}
.coin{
    width: 200px;
}
p{
    height: 60px;
    display: flex;
    flex-direction: row;
}
}
.trade-order .flex-center{
width: 100%;
height: 90px;
    line-height: 50px;
}
.order-header{
    height: 70px;
    line-height: 70px;
    border-bottom:1px solid #161736;
    color: #ADADD8
}
.order-header>div{
    align-items: center;
}
.order-content .all-amount:nth-child(1){
    width: 25%;
}
.order-content .all-amount:nth-child(2){
    width: 33%;
    text-align: center;
}
.order-content .flex-column{
    flex-direction: column;
        display: flex;
}
.order-content .all-amount:nth-child(3){
    width: 45%;
    text-align: center;
}
.order-content{
    padding-top: 10px;
    color: #ADADD8;
    font-size: 24px;
}
.data-img{
        min-height: 850px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
      color: #fff;
}
.data-img img{
     width: 120px;
    height: 120px;
}
</style>